<template>
  <div class="table">
    <div class="icon-item">
      <g-icon class="icon" name="volume-o" />
      <span>volume-o</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="location-o" />
      <span>location-o</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="arrow-right" />
      <span>arrow-right</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="arrow-down" />
      <span>arrow-down</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="kefu" />
      <span>kefu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="liebiaoxingshi" />
      <span>liebiaoxingshi</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="liuyanfill" />
      <span>liuyanfill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="liuyan" />
      <span>liuyan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="pengyoufill" />
      <span>pengyoufill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="pengyou" />
      <span>pengyou</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="qingchu" />
      <span>qingchu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="quan" />
      <span>quan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="saoma" />
      <span>saoma</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shaixuan" />
      <span>shaixuan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shanchu" />
      <span>shanchu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shezhi" />
      <span>shezhi</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shenfen" />
      <span>shenfen</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shizhongfill" />
      <span>shizhongfill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shizhong" />
      <span>shizhong</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shouyefill" />
      <span>shouyefill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shouye" />
      <span>shouye</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="search" />
      <span>search</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="searchfill" />
      <span>searchfill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="sousuoleimu" />
      <span>sousuoleimu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="tongzhifill" />
      <span>tongzhifill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="tongzhi1" />
      <span>tongzhi1</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="tuikuan" />
      <span>tuikuan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="wodefill" />
      <span>wodefill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="wode" />
      <span>wode</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="wuliu" />
      <span>wuliu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xihuanfill" />
      <span>xihuanfill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xihuan" />
      <span>xihuan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xinxifill" />
      <span>xinxifill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xinxi" />
      <span>xinxi</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="youhuiquan" />
      <span>youhuiquan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="yuyan" />
      <span>yuyan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="zhengli" />
      <span>zhengli</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="zuji" />
      <span>zuji</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="zuobiaofill" />
      <span>zuobiaofill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="zuobiao" />
      <span>zuobiao</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="dibu" />
      <span>dibu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangshang1" />
      <span>xiangshang1</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangshang2" />
      <span>xiangshang2</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangshang3" />
      <span>xiangshang3</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangshang5" />
      <span>xiangshang5</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangxia1" />
      <span>xiangxia1</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangxia2" />
      <span>xiangxia2</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangxia3" />
      <span>xiangxia3</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangxia5" />
      <span>xiangxia5</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangyou1" />
      <span>xiangyou1</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangyou2" />
      <span>xiangyou2</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangyou3fill" />
      <span>xiangyou3fill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangyou3" />
      <span>xiangyou3</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangzuo1" />
      <span>xiangzuo1</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangzuo2" />
      <span>xiangzuo2</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangji1fill" />
      <span>xiangji1fill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangji1" />
      <span>xiangji1</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangji2" />
      <span>xiangji2</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="jiazai" />
      <span>jiazai</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="shuaxin" />
      <span>shuaxin</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="wifi" />
      <span>wifi</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="hongbao" />
      <span>hongbao</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xinyongqia" />
      <span>xinyongqia</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="yonghufill" />
      <span>yonghufill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="yonghu" />
      <span>yonghu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="salefill" />
      <span>salefill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="sale" />
      <span>sale</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="zengsong" />
      <span>zengsong</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="androidgengduo" />
      <span>androidgengduo</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="leimu" />
      <span>leimu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="bangzhuzhongxin" />
      <span>bangzhuzhongxin</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="caidan" />
      <span>caidan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="zantongfill" />
      <span>zantongfill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="zantong" />
      <span>zantong</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangshang4" />
      <span>xiangshang4</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangxia4" />
      <span>xiangxia4</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="dianhua" />
      <span>dianhua</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="danpin" />
      <span>danpin</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="duozhongzhifu" />
      <span>duozhongzhifu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="erweima" />
      <span>erweima</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="guojiwuliu" />
      <span>guojiwuliu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="huwai" />
      <span>huwai</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="jujia" />
      <span>jujia</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="kuzi" />
      <span>kuzi</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="muying" />
      <span>muying</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="nanzhuang" />
      <span>nanzhuang</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="neiyi" />
      <span>neiyi</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="nvzhuang" />
      <span>nvzhuang</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="pinpai" />
      <span>pinpai</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="tequanzhuanshu" />
      <span>tequanzhuanshu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xiangbao" />
      <span>xiangbao</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="yishouchu" />
      <span>yishouchu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="others" />
      <span>others</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="danxuanfill" />
      <span>danxuanfill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="danxuan" />
      <span>danxuan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="square-no" />
      <span>square-no</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="square-fill" />
      <span>square-fill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="square-yes" />
      <span>square-yes</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="guanbi1" />
      <span>guanbi1</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="guanbi2fill" />
      <span>guanbi2fill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="guanbi2" />
      <span>guanbi2</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="jiahao" />
      <span>jiahao</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="jiahao1" />
      <span>jiahao1</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="jiahao2fill" />
      <span>jiahao2fill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="jianhao" />
      <span>jianhao</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="tishifill" />
      <span>tishifill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="tishi" />
      <span>tishi</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="wenhaofill" />
      <span>wenhaofill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="wenhao" />
      <span>wenhao</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="xuanze" />
      <span>xuanze</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="circular-no" />
      <span>circular-no</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="circular-fill" />
      <span>circular-fill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="circular-yes" />
      <span>circular-yes</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="biaoxingfill" />
      <span>biaoxingfill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="biaoxing" />
      <span>biaoxing</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="chexiao" />
      <span>chexiao</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="dianpufill" />
      <span>dianpufill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="dianpu" />
      <span>dianpu</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="dingdan" />
      <span>dingdan</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="fankui" />
      <span>fankui</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="fenxiang" />
      <span>fenxiang</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="gengduo" />
      <span>gengduo</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="gonglve" />
      <span>gonglve</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="gouwuchefill" />
      <span>gouwuchefill</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="gouwuche" />
      <span>gouwuche</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="gouwudai" />
      <span>gouwudai</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="qiapianxingshi" />
      <span>qiapianxingshi</span>
    </div>
    <div class="icon-item">
      <g-icon class="icon" name="kefufill" />
      <span>kefufill</span>
    </div>
  </div>
  <g-tabbar route :active="active">
        <g-tabbar-item  to="/" icon="shouye">首页</g-tabbar-item>
        <g-tabbar-item to="/icon" icon="dingdan">图标</g-tabbar-item>
        <g-tabbar-item  to="/button" icon="zantong">按钮</g-tabbar-item>
        <g-tabbar-item to="/cell"  icon="leimu">单元格</g-tabbar-item>
    </g-tabbar>
</template>
<script>
export default {
  data(){
    return{
      active:1
    }
  },
  setup() {}
};
</script>
<style lang="scss" scoped>
.table {
  width: auto;
  margin: 40px;
  background-color: #fff;
  border-radius: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
  margin-bottom:140px;
  .icon-item {
    &:active {
      background: #eee;
    }
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon {
      margin: 32px 0 32px;
      color: #323233;
      font-size: 64px;
    }
    span {
      display: block;
      height: 72px;
      margin: -8px 0 8px;
      padding: 0 10px;
      color: #646566;
      font-size: 12px;
      line-height: 36px;
    }
  }
}
</style>